<template>
  <div class="eat-list">
    <ul>
      <li @click="staplefood"><i class="iconfont icon-mifan"></i><span>主食</span></li>
      <li @click="egg"><i class="iconfont icon-jidan"></i><span>肉蛋类</span></li>
      <li @click="fruits"><i class="iconfont icon-shuiguo1"></i><span>水果</span></li>
      <li><i class="iconfont icon-lingshi1"></i><span>零食</span></li>
      <li><i class="iconfont icon-douzi"></i><span>豆类</span></li>
      <li><i class="iconfont icon-shucai-"></i><span>菌类</span></li>
    </ul>
  </div>
</template>
<script>
// import Vue from 'vue'
export default {
  data () {
    return {
      list: []
    }
  },
  methods: {
    staplefood () {
      this.$router.push('/eat/staplefood')
    },
    egg () {
      this.$router.push('/eat/egg')
    },
    fruits () {
      this.$router.push('/eat/fruits')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.eat-list {
  @include rect(100%, 2.35rem);
  background: rgb(236, 236, 236);
  margin-top: 0.1rem;
  ul {
    margin-left: 0.02rem;
    li {
      float: left;
      @include rect(33%, 1.17rem);
      text-align: center;
      border-right: 1px solid #cecece;
      border-bottom: 1px solid #cecece;
      @include flexbox();
      @include flex-direction(column);
      @include justify-content();
      @include align-items();
      i {
        @include rect(0.6rem, 0.6rem);
        background: rgb(248, 248, 248);
        border-radius: 50%;
        font-size: 0.4rem;
        line-height: 0.6rem;
      }
      .icon-mifan {
        color: #f7d384;
      }
      .icon-jidan {
        color: #f79b84;
      }
      .icon-shuiguo1 {
        color: #df5d4c;
        font-size: 0.43rem;
      }
      .icon-lingshi1 {
        font-size: 0.34rem;
        color: #f75959;
      }
      .icon-douzi {
        color: #95df64;
      }
      .icon-shucai- {
        font-size: 0.44rem;
        color: #bba268;
      }
      span {
        margin-top: 0.05rem;
      }
    }
    li:nth-of-type(3){
      border-right: none;
    }
      li:nth-of-type(6){
      border-right: none;
    }
  }
}
</style>
